import React from 'react'
import './App.css'
import { CameraOutline } from 'antd-mobile-icons'
import {
  Form,
  Input,
  Button,
  NavBar,
  Dialog,
  TextArea,
  DatePicker,
  Selector,
  Slider,
  Stepper,
  Switch,
} from 'antd-mobile'
function App() {
  const [form] = Form.useForm()
  const handleOpen = () => {
    // const inputel = 
  }
  return (
    <div>
      <div className='top'>
        <NavBar>新增乘客</NavBar>
      </div>
      <div className='center'>
        {/* 点击按钮打开文件选择器 */}
        <Button block size='large' onClick={()=>handleOpen()}>
          <CameraOutline /> 扫描证件添加
        </Button>
      </div>
      <div>
        {/* 用于添加乘车人 */}
        <Form
          form={form}
          layout='horizontal'
          footer={
            <Button block type='submit' color='primary' size='large'>
              提交
            </Button>
          }
        >
          <Form.Header>水平布局表单</Form.Header>
          <Form.Item
            name='name'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='code'
            label='身份证'
            rules={[{ required: true, message: '身份证不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入身份证' />
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default App
